<template>
  <div class="container">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-form-item label="项目名称" class="row-padding-bottom">
            <el-input
              v-model="filterField.projectName"
              placeholder="请输入项目名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="区域" class="row-padding-bottom">
            <el-cascader
              ref="manageArea"
              v-model="areaId"
              :options="areasOptions"
              @change="getAreaId"
              clearable
              filterable
              :props="{ checkStrictly: true }"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="行业" class="row-padding-bottom">
            <el-select
              v-model="filterField.industryId"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in industryOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="commonBtn"
            ></el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-table
        :data="tableList"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :load="load"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column label="---">
          <el-table-column prop="areaName" label="区域">
            <template slot-scope="scope">
              <span
                v-show="scope.row.hasChildren"
                class="icon iconfont iconhuabanfuben"
                @click="showChildren(scope.$index, scope.row)"
              ></span>
              {{ scope.row.areaName }}
            </template>
          </el-table-column>
          <el-table-column prop="industryName" label="行业" :type="demo.type1">
            <!-- <template slot-scope="scope">
            <span v-if="!scope.row.children">{{scope.row.areaName}}</span>
            <span v-else="scope.row.children">1</span>
        </template> -->
          </el-table-column>
          <el-table-column
            prop="projectName"
            label="投资类别"
            :type="demo.type2"
          >
            <!-- <template slot-scope="scope">
            <span v-if="!scope.row.children">{{scope.row.areaName}}</span>
            <span v-else="scope.row.children"></span>
        </template> -->
          </el-table-column>
        </el-table-column>
        <el-table-column label="项目数量" width="150">
          <el-table-column prop="bankActPayTotal" label="项目总数（个）">
          </el-table-column>
        </el-table-column>
        <el-table-column label="实名制合同统计">
          <el-table-column prop="shouldPay" label="项目数"> </el-table-column>
          <el-table-column prop="shouldPay" label="总人数"> </el-table-column>
          <el-table-column prop="shouldPay" label="签订合同数">
          </el-table-column>
        </el-table-column>
      </el-table>
      <Pagination
        ref="pagination"
        @getList="getTableList"
        :filterField="filterField"
        :requestUrl="requestUrl"
      ></Pagination>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'

export default {
  name: 'statisticsNum',
  components: {},
  data() {
    return {
      titleText: '工资代发',
      //表格数据
      tableList: [],
      requestUrl: 'api-su/cs/salarystats/expand/list',
      areaId: '',
      //搜索条件
      filterField: {
        projectName: '', //项目名称
        areaId: '', //区域
        industryId: '', //行业
      },
      isShow: false, //列表加载
      loading: true,
      //列设置
      value: '',
      options: [
        {
          label: '热门城市',
          options: [
            {
              value: 'Shanghai',
              label: '上海',
            },
            {
              value: 'Beijing',
              label: '北京',
            },
          ],
        },
        {
          label: '城市名',
          options: [
            {
              value: 'Chengdu',
              label: '成都',
            },
            {
              value: 'Shenzhen',
              label: '深圳',
            },
            {
              value: 'Guangzhou',
              label: '广州',
            },
            {
              value: 'Dalian',
              label: '大连',
            },
          ],
        },
      ],
      demo: {
        // type0:'',
        // type1:'',
        // type2:''
      },
      lazy: true,
    }
  },
  computed: { ...mapState(['areasOptions', 'industryOptions']) },
  created() {
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.getIndustry({})
  },
  methods: {
    ...mapActions(['getAreas', 'getIndustry']),
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },

    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    //跳转详情
    toDetail(index, row) {
      this.$router.push({
        path: '/home/salaryDf/salaryPayBatchList',
        name: 'salaryPayBatchList',
        query: {
          projectId: row.projectId,
          projectName: row.projectName,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salaryDf/salaryPayList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    load(tree, treeNode, resolve) {
      if (treeNode.level == '0') {
        this.demo = { type0: '111' }
        this.demo = Object.assign({}, this.demo)
      }
      setTimeout(() => {
        resolve([
          {
            id: 31,
            areaName: '赛罕区',
            industryName: '住建',
            projectName: '上海市普陀区金沙江路 1519 弄',
            //   hasChildren:true
          },
          {
            id: 32,
            areaName: '赛罕区',
            industryName: '住建1',
            projectName: '上海市',
          },
        ])
      }, 1000)
    },
    showChildren(index, row) {},
  },
}
</script>

<style scoped lang="less">
.topTitle {
  height: 67px;
  background-color: #e4ebf1;
  padding-left: 24px;
  font: bold 18px/67px Microsoft YaHei;
}
.mainCon {
  top: 198px;
}
@media only screen and (max-width: 1366px) {
  /deep/.searchInputWidth .el-form--inline .el-form-item__label {
    width: 80px;
  }
}
</style>
